<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>预约详情 - 智能洗护中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        success: '#22C55E',
                        danger: '#EF4444',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .badge {
                display: inline-block;
                padding: 0.15rem 0.4rem;
                border-radius: 12px;
                font-size: 0.75rem;
                font-weight: 500;
            }
            .card-shadow {
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 flex justify-between items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-10 border-b border-lightgray">
            <a href="appointment-list.html" class="text-dark">
                <i class="fa fa-arrow-left text-lg"></i>
            </a>
            <div class="text-lg font-bold">预约详情</div>
            <div class="w-6"></div> <!-- 占位元素，使标题居中 -->
        </header>

        <!-- 主内容区 -->
        <main class="pt-16 pb-24">
            <!-- 订单状态 -->
            <div class="bg-white p-5 border-b border-lightgray">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-lg font-bold">AI智能基础洗头</h2>
                        <p class="text-sm text-gray mt-1">智能洗护中心(北京路店)</p>
                    </div>
                    <span class="text-xs badge bg-primary/10 text-primary">待服务</span>
                </div>
            </div>
            
            <!-- 基本信息卡片 -->
            <div class="bg-white p-5 mt-3 card-shadow">
                <h3 class="text-sm font-medium text-gray mb-3">预约信息</h3>
                
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">预约编号</span>
                        <span class="text-sm font-medium">#2023111503</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">预约时间</span>
                        <span class="text-sm font-medium">2023-11-15 16:00</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">服务机器人</span>
                        <span class="text-sm font-medium">机器人03号</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">服务时长</span>
                        <span class="text-sm font-medium">约30分钟</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">预约人</span>
                        <span class="text-sm font-medium">张小明</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">联系电话</span>
                        <span class="text-sm font-medium">138****6789</span>
                    </div>
                </div>
            </div>
            
            <!-- 服务内容卡片 -->
            <div class="bg-white p-5 mt-3 card-shadow">
                <h3 class="text-sm font-medium text-gray mb-3">服务内容</h3>
                
                <div class="flex items-center p-3 bg-light rounded-lg">
                    <img src="https://picsum.photos/80/80?random=10" alt="AI智能基础洗头" class="w-16 h-16 rounded object-cover">
                    <div class="ml-3 flex-1">
                        <h4 class="text-sm font-medium">AI智能基础洗头</h4>
                        <p class="text-xs text-gray mt-0.5">智能水温调节 | 穴位按摩 | 自动冲洗</p>
                    </div>
                    <span class="text-sm font-medium text-secondary">¥39</span>
                </div>
            </div>
            
            <!-- 支付信息卡片 -->
            <div class="bg-white p-5 mt-3 card-shadow">
                <h3 class="text-sm font-medium text-gray mb-3">支付信息</h3>
                
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">支付方式</span>
                        <span class="text-sm font-medium">微信支付</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">实付金额</span>
                        <span class="text-sm font-medium text-secondary">¥39.00</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">支付时间</span>
                        <span class="text-sm font-medium">2023-11-14 09:25</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm text-gray">交易单号</span>
                        <span class="text-sm font-medium">420000192820231114...</span>
                    </div>
                </div>
            </div>
            
            <!-- 门店信息卡片 -->
            <div class="bg-white p-5 mt-3 card-shadow">
                <h3 class="text-sm font-medium text-gray mb-3">门店信息</h3>
                
                <div class="flex">
                    <img src="https://picsum.photos/100/100?random=20" alt="智能洗护中心(北京路店)" class="w-20 h-20 rounded object-cover">
                    <div class="ml-3 flex-1">
                        <h4 class="text-sm font-medium">智能洗护中心(北京路店)</h4>
                        <p class="text-xs text-gray mt-0.5 flex items-center">
                            <i class="fa fa-map-marker mr-1"></i>
                            广州市越秀区北京路123号
                        </p>
                        <p class="text-xs text-gray mt-1 flex items-center">
                            <i class="fa fa-phone mr-1"></i>
                            020-88776655
                        </p>
                        <p class="text-xs text-gray mt-1 flex items-center">
                            <i class="fa fa-clock-o mr-1"></i>
                            10:00-22:00
                        </p>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部操作按钮 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray p-4">
            <div class="flex gap-3">
                <button class="flex-1 py-3 border border-danger bg-danger/5 rounded-lg text-danger font-medium">
                    <i class="fa fa-times mr-1"></i> 取消预约
                </button>
            </div>
        </div>
    </div>
</body>
</html>
    